<template>
  <div>
    <van-row class="van-2">
      <van-col span="8"><van-icon name="arrow-left" /></van-col>
      <van-col span="8">客户列表信息</van-col>
      <van-col span="8" class="van-1">新增</van-col>
    </van-row>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        action-text="搜索"
      />
    </form>
    <div v-for="item in records" :key="item.id">
      <van-row class="box">
        <van-col class="box-1" span="6"
          ><ul>
            <li>客户信息</li>
            <li>联系方式</li>
            <li>公司名称</li>
            <li>职务</li>
          </ul></van-col
        >
        <van-col span="18"
          ><ul>
            <li>{{item.custName}}</li>
            <li>{{item.telephone}}</li>
            <li>{{item.cityName}}</li>
            <li>{{item.position}}</li>
          </ul></van-col
        >
      </van-row>
      <div class="box-3">
        <van-button round type="info" @click="$router.push('/Custxin')">新增拜访</van-button
        ><van-button round type="info" @click="$router.push(`/Cust?id=${item.id}`)">拜访记录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { CustuserData } from "../request/api";
export default {
  data() {
    return {
      value: "",
      searc: "",
      records: [],
      //   custName:'',
      //   telephone:'',
      //   cityName:'',
      //   position:'',
      //   id:''
    };
  },
  methods: {
    onSearch(val) {
      this.searc = val;
      console.log(this.searc, 123);
    },
    onCancel() {},
  },
  created() {
    CustuserData({
      keyword: this.searc,
      current: "1",
      size: "100",
    }).then((res) => {
      //  let {custName,telephone,cityName,position,id}=res.data.records
      //  this.custName=custName
      //  this.telephone=telephone
      //  this.cityName=cityName
      //  this.position=position
      //  this.id=id
      this.records = res.data.records;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.van-2 {
  padding: 15px 10px;
  background-color: blue;
}
.van-1 {
  text-align: right;
}
.box {
  padding: 15px;
  line-height: 25px;
  border-bottom: 1px solid #ccc;
  background-color: #efefef;
  .box-1 {
    text-align: right;
    padding-right: 10px;
  }
}
.box-3 {
  text-align: right;
  border-bottom: 1px solid #ccc;
  background-color: #efefef;
  padding: 10px;
  margin-bottom: 15px;
  .van-button {
    margin-right: 10px;
  }
}
</style>